<template>
	<view>
		<!-- 加载状态 -->
		<bounce-loader v-if="loading" :color="loaderColor" :text="loadingText" />

		<!-- 空状态 -->
		<empty-state v-else-if="showEmpty" :content="emptyText" />

		<!-- 正常内容 -->
		<slot v-else></slot>
	</view>
</template>

<script>
	import BounceLoader from './BounceLoader.vue'
	import EmptyState from './empty.vue'

	export default {
		components: {
			BounceLoader,
			EmptyState
		},
		props: {
			loading: Boolean,
			isEmpty: Boolean,
			loaderColor: {
				type: String,
				default: '#1890ff'
			},
			loadingText: {
				type: String,
				default: '加载中...'
			},
			emptyText: {
				type: String,
				default: '数据'
			},
			bottom: {
				type: String,
				default: '28%' // 支持 top/bottom 定位 
			}
		},
		computed: {
			showEmpty() {
				return !this.loading && this.isEmpty
			}
		}
	}
</script>